<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:insert="~{include :: header('Job view')}" />
  <th:block th:insert="~{include :: jsonview-css}" />
</head>
<body class="white-bg">

  <div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-job-edit" th:object="${job}">
      <div class="form-group">
        <label class="col-sm-3 control-label is-required">分组名称：</label>
        <div class="col-sm-9">
          <p class="form-control-static">[(*{group})]</p>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label is-required">Job名称：</label>
        <div class="col-sm-9">
          <p class="form-control-static">[(*{jobName})]</p>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label is-required">Job状态：</label>
        <div class="col-sm-9">
          <p class="form-control-static">[( ${@disjobService.desc('JobState', job.jobState)} )]</p>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label is-required">Job类型：</label>
        <div class="col-sm-9">
          <p class="form-control-static">[( ${@disjobService.desc('JobType', job.jobType)} )]</p>
        </div>
      </div>
      <div class="form-group">
        <label th:switch="${job.jobType}" class="col-sm-3 control-label is-required">
          <a th:case="2" href="javascript:void(0)" onclick="viewDag()">Job执行器：</a>
          <span th:case="*">Job执行器：</span>
        </label>
        <div class="col-sm-9">
          <pre id="jobExecutor"></pre>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">Job参数：</label>
        <div class="col-sm-9">
          <pre id="jobParam"></pre>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">重试配置：</label>
        <div class="col-sm-3">
          <select disabled name="retryType" class="form-control m-b" th:with="enum=${@disjobService.enums('RetryType')}">
            <option th:each="e : ${enum}" th:text="${e.desc}" th:value="${e.value}" th:field="*{retryType}"></option>
          </select>
        </div>
        <div class="col-sm-3">
          <input disabled name="retryCount" class="form-control" th:value="${#strings.concat(job.retryCount, ' 次')}" type="text" />
        </div>
        <div class="col-sm-3">
          <input disabled name="retryInterval" th:value="${#strings.concat(job.retryInterval, ' 毫秒')}" class="form-control" type="text" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">Job有效期：</label>
        <div class="col-sm-9">
          <div class="input-daterange input-group">
            <input disabled name="startTime" th:value="${#dates.format(job.startTime, 'yyyy-MM-dd HH:mm:ss')}" type="text" class="input-sm form-control" />
            <span class="input-group-addon"> ~ </span>
            <input disabled name="endTime" th:value="${#dates.format(job.endTime, 'yyyy-MM-dd HH:mm:ss')}" type="text" class="input-sm form-control" />
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label is-required">触发器配置：</label>
        <div class="col-sm-3">
          <select disabled name="triggerType" class="form-control m-b" th:with="enum=${@disjobService.enums('TriggerType')}">
            <option th:each="e : ${enum}" th:text="${e.desc}" th:value="${e.value}" th:field="*{triggerType}"></option>
          </select>
        </div>
        <div class="col-sm-6">
          <input disabled name="triggerValue" th:field="*{triggerValue}" class="form-control" type="text" required />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">执行超时时间(毫秒)：</label>
        <div class="col-sm-9">
          <p class="form-control-static">[(*{executeTimeout})]</p>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label is-required">执行冲突策略：</label>
        <div class="col-sm-9">
          <p class="form-control-static">[( ${@disjobService.desc('CollidedStrategy', job.collidedStrategy)} )]</p>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label is-required">过期策略：</label>
        <div class="col-sm-9">
          <p class="form-control-static">[( ${@disjobService.desc('MisfireStrategy', job.misfireStrategy)} )]</p>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label is-required">路由策略：</label>
        <div class="col-sm-9">
          <p class="form-control-static">[( ${@disjobService.desc('RouteStrategy', job.routeStrategy)} )]</p>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label is-required">Worker关机的执行策略：</label>
        <div class="col-sm-9">
          <p class="form-control-static">[( ${@disjobService.desc('ShutdownStrategy', job.shutdownStrategy)} )]</p>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">告警选项：</label>
        <div class="col-sm-9">
          <label class="check-box"><input type="checkbox" th:checked="${job.alertOptions==1 || job.alertOptions==3}" disabled />异常警报</label>
          <label class="check-box"><input type="checkbox" th:checked="${job.alertOptions==2 || job.alertOptions==3}" disabled />正常通知</label>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">备注：</label>
        <div class="col-sm-9">
          <p class="form-control-static">[(*{remark})]</p>
        </div>
      </div>
    </form>
  </div>

  <th:block th:insert="~{include :: footer}" />
  <th:block th:insert="~{include :: jsonview-js}" />

  <script th:inline="javascript">
    const prefix = ctx + "disjob/job";

    $(function () {
      viewJson("jobParam",    [[${job.jobParam}]]    );
      viewJson("jobExecutor", [[${job.jobExecutor}]] );
    });

    function viewJson(id, text) {
      const elem = $("#" + id);
      if (text) {
        try {
          elem.JSONView(text);
        } catch (error) {
          elem.text(text);
        }
      } else {
        elem.text(" ");
      }
    }

    function viewDag() {
      layer.photos({
        photos: {
          title: "DAG",
          data: [{
            alt: "original",
            src: prefix + "/dag?thumb=false&expr=" + encodeURIComponent([[${job.jobExecutor}]])
          },{
            alt: "thumbnail",
            src: prefix + "/dag?thumb=true&expr=" + encodeURIComponent([[${job.jobExecutor}]])
          }]
        },
        footer: false
      });
    }
  </script>
</body>
</html>
